<style>
  #error-content {margin: 1em auto 5em}
  .form td {vertical-align: top}
</style>

<div id="error-content">

  <h1>Flash Messages</h1>

  <p>
    The following sub-sections test various flash message to make
    sure they look good.
  </p>

  <h2>Cannon flash keys</h2>
  <p>
    For a while :notice, :warning and :message have been somewhat
    of cannon flash keys.
  </p>
  <%= flash_messages :notice, :warning, :message %>

  <h2>Alternate flash keys</h2>
  <p>
    The cannon flash keys are not always obvious. Some people
    prefer :success to :notice, :error or :alert to :warning and :info
    to :message. We want to support these common alternates.
  </p>
  <%= flash_messages :success, :error, :alert, :info %>

  <h2>Corner Cases</h2>
  <p>
    We also want to test to ensure that VERY long flash messages still
    look good AND flash messages with multiple values (i.e. an array)
    is supported.
  </p>
  <%= flash_messages :long, :multiple %>

  <h1>Form Errors</h1>
  <p>
    This next section tests form error.
    Specifically we are looking at:
  </p>
  <ul>
    <li>The problem fields highlighted</li>
    <li>The detail of what is wrong pops up on focus</li>
  </ul>

  <%= form_tag do %>

    <table class="form">
      <tr>
        <td><label for="object_text">Text Field</label></td>
        <td><%= text_field :object, :text %></td>
      </tr>
      <tr>
        <td><label for="object_multiline">Text Area</label></td>
        <td><%= text_area :object, :multiline, :rows => 5, :cols => 40 %></td>
      </tr>
      <tr>
        <td><label for="object_select">Select List</label></td>
        <td><%= select :object, :select, ['foo', 'bar'] %></td>
      </tr>
      <tr>
        <td><label for="object_file">File Field</label></td>
        <td><%= file_field :object, :file %></td>
      </tr>
      <tr>
        <td></td>
        <td>
          <%= check_box :object, :checkbox %>
          <label for="object_checkbox">Check Box</label>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <%= radio_button :object, :radio, 'Some value' %>
          <label for="object_radio">Radio</label>
        </td>
      </tr>
      <tr>
        <td><label for="object_before">Inline error before field</label></td>
        <td><%= text_field :object, :before, :class => 'error-before',
          'data-error-label' => 'Field' %></td>
      </tr>
      <tr>
        <td><label for="object_after">Inline error after field</label></td>
        <td><%= text_field :object, :after, :class => 'error-after' %></td>
      </tr>
    </table>
  <% end %>
</div>
